<template>
  <div>
    <!-- 是Buefy中的一个类，页面以白色为背景 -->
    <div class="box">🔔 {{ billboard.content }}</div>

    <!-- https://bulma.io/documentation/columns/basics 官网 is-three-quarters 是占页面的3/4 -->
    <div class="columns">

      <!-- 正文 3/4 -->
      <div class="column is-three-quarters">
        <TopicList></TopicList>
      </div>
      <!-- 侧边栏 1/4-->
      <div class="column">
        <CardBar></CardBar>
      </div>
    </div>
  </div>
</template>

<script>
import { getBillboard } from "@/api/billboard";
import CardBar from "@/views/card/CardBar";
import PostList from "@/views/post/index";

export default {
  name: "Home",

  components: { CardBar, TopicList: PostList },

 data() {
    return {
      billboard: {
        content: "",
      },
    };
  },

  created() {
    this.fetchBillboard();
  },

  methods: {
    async fetchBillboard() {
      getBillboard().then((value) => {
        const { data } = value;
        this.billboard = data;
      });
    },
  },
};
</script>